import React, { useEffect } from 'react';
import './index.less';
import { Button, ProgressBar, WaterMark } from 'antd-mobile';

import { RightOutline, UndoOutline } from 'antd-mobile-icons';
export default function Climited(props: {
  _id: any;
  good: any;
  startTime: Date;
  overTime: Date;
  done: Boolean;
  setDone: any;
}) {
  function updone(id) {
    console.log(id, '子组件传递');
    props.setDone(id);
  }
  useEffect(() => {
    console.log(props, 'props');
  }, []);
  return (
    <div className="climit">
      {props.good.map((item) => {
        return (
          <div key={item._id}>
            <div className="cleft">
              <img src={item.imgs} alt="" />
              <div className="desc">
                <p>{item.name}</p>
                <div className="pro">
                  <ProgressBar
                    percent={item.num}
                    text={'券已抢' + item.num + '%'}
                    style={{ '--fill-color': 'rgb(227,67,58)' }}
                  />
                </div>
                <p className="p2">
                  <span>￥{item.price}</span>
                  <span>￥{item.price.toFixed(2)}</span>
                  <button
                    className="goshoping"
                    onClick={() => updone(item._id)}
                  >
                    去抢购
                    <RightOutline />
                  </button>
                </p>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}
